<!--
  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<NcSelect
		v-model="selected"
		:input-id="setting.id"
		class="group-select"
		:placeholder="t('settings', 'None')"
		label="displayName"
		:options="availableGroups"
		multiple
		keep-open />
</template>

<script>
import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs'
import { generateUrl } from '@nextcloud/router'
import NcSelect from '@nextcloud/vue/components/NcSelect'
import logger from '../../logger.ts'

export default {
	name: 'GroupSelect',
	components: {
		NcSelect,
	},

	props: {
		availableGroups: {
			type: Array,
			default: () => [],
		},

		setting: {
			type: Object,
			required: true,
		},

		authorizedGroups: {
			type: Array,
			required: true,
		},
	},

	data() {
		return {
			selected: this.authorizedGroups
				.filter((group) => group.class === this.setting.class)
				.map((groupToMap) => this.availableGroups.find((group) => group.gid === groupToMap.group_id))
				.filter((group) => group !== undefined),
		}
	},

	watch: {
		selected() {
			this.saveGroups()
		},
	},

	methods: {
		async saveGroups() {
			const data = {
				newGroups: this.selected,
				class: this.setting.class,
			}
			try {
				await axios.post(generateUrl('/apps/settings/') + '/settings/authorizedgroups/saveSettings', data)
			} catch (e) {
				showError(t('settings', 'Unable to modify setting'))
				logger.error('Unable to modify setting', e)
			}
		},
	},
}
</script>

<style lang="scss">
.group-select {
	width: 100%;
}
</style>
